<template>
    <div id="index_tip_" class="p-toolbar" :style="{ padding: '20px 0', top: showIcon ? boxTop : box2Top }">
        <div class="pointer stay">
            <b>鼠标位置:</b> <br />x:{{ map && map.pointer && map.pointer.mx }} <br />y: {{ map && map.pointer && map.pointer.my
            }}
            {{ map && map.pointer && map.pointer.unit }}
        </div>
        <div class="ws stay">
            <b>比例尺:</b> <br />{{ map && map.grid && map.grid.spacing }} {{ map && map.grid && map.grid.spacingUnit }},
        </div>
        <div v-show="showIcon" class="center">
            <p-tooltip :content="$t('lang.ruler')">
                <i :class="[
                    'btn icon',
                    {
                        'icon-ic_chi': currentRulerMode !== 2,
                        'icon-grid': currentRulerMode === 2,
                        selected: currentRulerMode
                    }
                ]" @click="handleLayout"></i>
            </p-tooltip>
        </div>
        <div v-show="showIcon" class="center">
            <p-tooltip :content="$t('lang.label')">
                <i :class="['btn icon icon-label', currentDisplayVehicleLabels ? 'selected' : '']"
                    @click="handleDisplayVehicleLabels"></i>
            </p-tooltip>
        </div>

        <div v-show="showIcon" class="center">
            <p-map-lable />
        </div>
        <div v-show="showIcon" class="center">
            <p-tooltip :content="$t('lang.ZoomIn')">
                <i class="btn icon icon-fangda1" @click="handleZoomIn"></i>
            </p-tooltip>
        </div>

        <div v-show="showIcon" class="center">
            <p-tooltip :content="$t('lang.ZoomOut')">
                <i class="btn icon icon-suoxiao-" @click="handleZoomOut"></i>
            </p-tooltip>
        </div>
        <div v-show="showIcon" class="center">

            <p-tooltip :content="$t('lang.rotate')">
                <i class="btn icon icon-youxuanzhuan" @click="handleRotateClockwise"></i>
            </p-tooltip>

        </div>
        <div v-show="showIcon" class="center">
            <p-tooltip :content="$t('lang.rotate')">
                <i class="btn icon icon-zuoxuanzhuan" @click="handleRotateCounterclockwise"></i>
            </p-tooltip>

        </div>
        <div v-show="showIcon" class="center">
            <p-tooltip :content="$t('lang.FullScreen')">
                <i class="btn icon icon-fangda" @click="handleResetMap"></i>
            </p-tooltip>

        </div>
        <div v-show="showIcon" class="center">

        </div>
        <div v-show="showIcon" class="center">
            <p-tooltip :content="$t('lang.envelope')">
                <i class="btn icon icon-kejian" :class="{ selected: isShowEnvelopeActive }"
                    @click="handleShowEnvelope"></i>
            </p-tooltip>

        </div>
        <div v-show="showIcon" class="center">
            <!--<i
            class="btn icon icon-showTrafficData"
            :class="{ selected: isShowTrafficActive }"
            @click="handleShowTrafficData"
        />-->
            <p-tooltip :content="$t('lang.quickJob')">
                <i :class="['btn icon icon-tuozhuai', currentDragMode ? 'selected' : '']" @click="handleDragMode"></i>
            </p-tooltip>

        </div>
        <div v-show="showIcon" class="center">
            <p-tooltip :content="$t('lang.track')">
                <i :class="['btn icon icon-guiji-', isTrackActive ? 'selected' : '']" @click="handleTrack"></i>
            </p-tooltip>

        </div>
        <div v-show="showIcon" class="center">
            <p-tooltip :content="$t('lang.tape')">
                <i :class="['btn icon icon-juanchi', currentTapeMode ? 'selected' : '']" @click="handleTapeMode"></i>
            </p-tooltip>

        </div>
        <div v-show="showIcon" class="center">
            <p class="spliter" />

        </div>
        <div v-show="showIcon" class="center">
            <p-tooltip :content="$t('lang.drawPaths')">
                <i class="btn icon icon-route1" :class="{ selected: isDrawPathsActive }" @click="handleDrawPaths"></i>
            </p-tooltip>

        </div>
        <div v-show="showIcon" class="center">
            <p-tooltip :content="$t('lang.drawContours')">
                <i class="btn icon icon-shape" :class="{ selected: isDrawContoursActive }"
                    @click="handleDrawContours"></i>
            </p-tooltip>

        </div>
        <div v-show="showIcon" class="center">
            <p-tooltip :content="$t('lang.drawRanges')">
                <i class="btn icon icon-quyu" :class="{ selected: isDrawRangesActive }" @click="handleDrawRanges"></i>
            </p-tooltip>

        </div>
        <div v-show="showIcon" class="center">

            <p-tooltip :content="$t('lang.multiSelect')">
                <i class="btn icon icon-kuangxuan" :class="{ selected: isMultiSelectActive }"
                    @click="handleMultiSelect"></i>
            </p-tooltip>

        </div>
        <div v-show="showIcon" class="center">
            <p-tooltip :content="$t('lang.Undo')">
                <i class="btn icon icon-chexiao" @click="handleUndo"></i>
            </p-tooltip>

        </div>
        <div v-show="showIcon" class="center">
            <p-tooltip :content="$t('lang.fn')">
                <i class="btn icon icon-gongneng" :class="{ selected: isAltFnActive }" @click="handleAltFn"></i>
            </p-tooltip>

        </div>
        <div v-show="showIcon" class="center">
            <!--隐藏按钮-车辆，路线，图形，区域-->
            <p class="spliter" />
            <p-tooltip :content="$t('lang.hideVehicles')">
                <i class="btn icon icon-truck hide" :class="{ selected: currentHideVehiclesMode }"
                    @click="handleHideVehicles"></i>
            </p-tooltip>
        </div>
        <div v-show="showIcon" class="center">
            <p-tooltip :content="$t('lang.hidePaths')">
                <i class="btn icon icon-route1 hide" :class="{ selected: currentHidePathsMode }"
                    @click="handleHidePaths"></i>
            </p-tooltip>
        </div>
        <div v-show="showIcon" class="center">
            <p-tooltip :content="$t('lang.hideContours')">
                <i class="btn icon icon-shape hide" :class="{ selected: currentHideContoursMode }"
                    @click="handleHideContours"></i>
            </p-tooltip>
        </div>
        <div v-show="showIcon" class="center">
            <p-tooltip :content="$t('lang.hideRanges')">
                <i class="btn icon icon-quyu hide" :class="{ selected: currentHideRangesMode }"
                    @click="handleHideRanges"></i>
            </p-tooltip>
        </div>
        <br />
        <div v-show="showIcon" class="center handler">
            <div @click="toOpenOrCloseFn(2)">收起</div>
        </div>
        <div v-show="!showIcon" class="center handler">
            <div class="title" @click="toOpenOrCloseFn(1)">展开</div>
        </div>
    </div>
</template>

<script>
import * as enums from '../store/status-enums.js';
import { mapState } from 'vuex';
import bus from '../utils/Eventbus.js';
import Kernel from '../core/Kernel.js';
import pTooltip from '../components/p-tooltip.vue';
import PMapLable from './p-map-label';
/**
 * p-toolbar
 * @date 2023.02.01
 */
export default {
    name: 'p-toolbar',
    components: { PMapLable, pTooltip },
    props: {
        map: Object,
        tabName: String,
        rulerMode: Number,
        mapMode: String,
        dragMode: Boolean,
        displayVehicleLabels: Boolean,
        tapeMode: Boolean,
        hideVehiclesMode: Boolean,
        hidePathsMode: Boolean,
        hideContoursMode: Boolean,
        hideRangesMode: Boolean
    },
    data() {
        return {
            currentRulerMode: this.rulerMode,
            currentMapMode: this.mapMode,
            currentDragMode: this.dragMode,
            currentTapeMode: this.tapeMode,
            currentHideVehiclesMode: this.hideVehiclesMode,
            currentHidePathsMode: this.hidePathsMode,
            currentHideContoursMode: this.hideContoursMode,
            currentHideRangesMode: this.hideRangesMode,
            currentDisplayVehicleLabels: this.displayVehicleLabels,
            // p-tooltip options
            effect: 'dark',
            openDelay: 600,
            isHideVehicles: false,
            isHideContours: false,
            isHideRanges: false,
            showIcon: true,
            boxTop: "10px",
            box2Top: "10px"
        };
    },
    computed: {
        ...mapState({
            openedBoxes: state => state.businessStatus.openedBoxes,
            selectedPaths: state => state.businessStatus.selectedPaths,
            isShowEnvelopeActive: state => state.businessStatus.isShowEnvelopeActive,
            isShowTrafficActive: state => state.businessStatus.isShowTrafficActive,
            isDrawContoursActive: state => state.businessStatus.isDrawContoursActive,
            isDrawRangesActive: state => state.businessStatus.isDrawRangesActive,
            isDrawPathsActive: state => state.businessStatus.isDrawPathsActive,
            isMultiSelectActive: state => state.businessStatus.isMultiSelectActive,
            isTrackActive: state => state.businessStatus.isTrackActive,
            isAltFnActive: state => state.businessStatus.isAltFnActive,
            showJobsTab: state => state.businessStatus.showJobsTab
        })
    },
    watch: {
        rulerMode(val) {
            this.currentRulerMode = val;
        },
        currentRulerMode(val) {
            this.$emit('rulerModeChange', val);
        },
        mapMode(val) {
            this.currentMapMode = val;
        },
        currentMapMode(val) {
            this.$emit('mapModeChange', val);
        },
        dragMode(val) {
            this.currentDragMode = val;
        },
        currentDragMode(val) {
            this.$emit('dragModeChange', val);
        },
        tapeMode(val) {
            this.currentTapeMode = val;
        },
        currentTapeMode(val) {
            this.$emit('tapeModeChange', val);
        },
        displayVehicleLabels(val) {
            this.currentDisplayVehicleLabels = val;
        },
        currentDisplayVehicleLabels(val) {
            this.$emit('displayVehicleLabelsChange', val);
        },
        selectedPaths(val) {
            console.log('p-toolbar.watch.selectedPaths: ---> ', val);
            if (val && val.length === 1 && val.indexOf('-1') < 0) {
                if (this.isDrawPathsActive) this.$store.commit(enums.DEACTIVE_DRAW_PATHS);
                bus.emit('p-painter-paths.clearLocals');
            }
        },
        tabName(val) {
            console.log('p-toolbar.watch.tabName:', val);
            if (val !== 'jobs') {
                this.$store.commit(enums.DEACTIVE_SHOW_JOBS);
            }
            if (val === 'vehicles') {
                this.currentHideVehiclesMode = false;
            } else if (val === 'paths') {
                this.currentHidePathsMode = false;
            } else if (val === 'contours') {
                this.currentHideContoursMode = false;
            } else if (val === 'ranges') {
                this.currentHideRangesMode = false;
            }
        },
        currentHideVehiclesMode(val) {
            console.log('p-toolbar.watch.currentHideVehiclesMode:', val);
            this.$emit('vehiclesHideChange', val);
            if (val && this.tabName === 'vehicles') {
                this.$store.commit(enums.ACTIVE_SHOW_JOBS);
            }
        },
        currentHidePathsMode(val) {
            console.log('p-toolbar.watch.currentHidePathsMode:', val);
            this.$emit('pathsHideChange', val);
            if (val && this.tabName === 'paths') {
                this.$store.commit(enums.ACTIVE_SHOW_JOBS);
            }
        },
        currentHideContoursMode(val) {
            console.log('p-toolbar.watch.currentHideContoursMode:', val);
            this.$emit('contoursHideChange', val);
            if (val && this.tabName === 'contours') {
                this.$store.commit(enums.ACTIVE_SHOW_JOBS);
            }
        },
        currentHideRangesMode(val) {
            console.log('p-toolbar.watch.currentHideRangesMode:', val);
            this.$emit('rangesHideChange', val);
            if (val && this.tabName === 'ranges') {
                this.$store.commit(enums.ACTIVE_SHOW_JOBS);
            }
        }
        // altFnActived (val) { this.$store.commit('handleAltFn', val); }
    },
    beforeDestroy: function () {
        this.$store.commit(enums.DEACTIVE_MULTI_SELECT);
        this.$store.commit(enums.DEACTIVE_DRAW_CONTOURS);
        this.$store.commit(enums.DEACTIVE_DRAW_RANGES);
        this.$store.commit(enums.DEACTIVE_DRAW_PATHS);
        this.$store.commit(enums.DEACTIVE_ALTFN);
    },
    mounted() {
        this.init();
        this.getmoveFn()
    },
    methods: {
        init() {
            this.kernel = Kernel.getInstance(this.$root);
        },
        handleLayout() {
            // this.currentRulerMode = !this.currentRulerMode;
            // this.currentRulerMode = (this.currentRulerMode + 1) % 3;
            this.currentRulerMode = !this.currentRulerMode ? 1 : 0;
            /**
             * 切换标尺重绘地图
             * @author sunleqing
             * @date 2020-03-31
             */
            // console.error(this.currentRulerMode);
            this.handleResetMap();
        },

        // 隐藏--车辆
        handleHideVehicles() {
            this.currentHideVehiclesMode = !this.currentHideVehiclesMode;
        },
        // 隐藏--路线
        handleHidePaths() {
            this.currentHidePathsMode = !this.currentHidePathsMode;
        },
        // 隐藏--图形
        handleHideContours() {
            this.currentHideContoursMode = !this.currentHideContoursMode;
        },
        // 隐藏--区域
        handleHideRanges() {
            this.currentHideRangesMode = !this.currentHideRangesMode;
        },

        handleMapMode() {
            this.currentMapMode = this.currentMapMode === 'isometric' ? '' : 'isometric';
        },
        handleDisplayVehicleLabels() {
            this.currentDisplayVehicleLabels = !this.currentDisplayVehicleLabels;
        },
        handleZoomIn() {
            bus.emit('v-canvas-grid.zoomIn');
        },
        handleZoomOut() {
            bus.emit('v-canvas-grid.zoomOut');
        },
        handleRotateClockwise() {
            bus.emit('v-canvas-grid.rotate', 90);
        },
        handleRotateCounterclockwise() {
            bus.emit('v-canvas-grid.rotate', -90);
        },
        handleResetMap() {
            // 指南针归0 slq 2020.03.31
            bus.emit('v-canvas-grid.rotate', 0);
            bus.emit('p-painter.repaint');
        },
        handleShowEnvelope() {
            if (this.currentTapeMode) this.currentTapeMode = false;

            if (!this.isShowEnvelopeActive) this.$store.commit(enums.ACTIVE_SHOW_ENVELOPE);
            else this.$store.commit(enums.DEACTIVE_SHOW_ENVELOPE);
            // bus.emit('p-kernel.send', {
            //     action: 'updateUserProperties',
            //     key: 'showTrafficData',
            //     value: this.isShowEnvelopeActive
            // });
            this.kernel.send({
                action: 'updateUserProperties',
                key: 'showTrafficData',
                value: this.isShowEnvelopeActive
            });
        },
        handleShowTrafficData() {
            if (this.currentTapeMode) this.currentTapeMode = false;

            if (!this.isShowTrafficActive) this.$store.commit(enums.ACTIVE_SHOW_TRAFFIC);
            else this.$store.commit(enums.DEACTIVE_SHOW_TRAFFIC);
        },
        handleMultiSelect() {
            if (this.isDrawPathsActive) this.handleDrawPaths();
            if (this.isDrawContoursActive) this.handleDrawContours();
            if (this.isDrawRangesActive) this.handleDrawRanges();
            if (this.currentDragMode) this.currentDragMode = false;
            if (this.currentTapeMode) this.currentTapeMode = false;

            let contourTableOpened = this.openedBoxes.indexOf('contoursTable') !== -1,
                pathTableOpened = this.openedBoxes.indexOf('pathsTable') !== -1,
                vehicleTableOpened = this.openedBoxes.indexOf('vehiclesTable') !== -1,
                rangeTableOpened = this.openedBoxes.indexOf('rangesTable') !== -1;
            if (!contourTableOpened && !pathTableOpened && !vehicleTableOpened && !rangeTableOpened) return;
            if (!this.isMultiSelectActive) this.$store.commit(enums.ACTIVE_MULTI_SELECT);
            else this.$store.commit(enums.DEACTIVE_MULTI_SELECT);
        },
        handleDragMode() {
            if (this.isDrawPathsActive) this.handleDrawPaths();
            if (this.isDrawContoursActive) this.handleDrawContours();
            if (this.isDrawRangesActive) this.handleDrawRanges();
            if (this.isMultiSelectActive) this.$store.commit(enums.DEACTIVE_MULTI_SELECT);
            if (this.currentTapeMode) this.currentTapeMode = false;
            this.currentDragMode = !this.currentDragMode;
        },
        handleTapeMode() {
            if (this.isDrawPathsActive) this.handleDrawPaths();
            if (this.isDrawContoursActive) this.handleDrawContours();
            if (this.isDrawRangesActive) this.handleDrawRanges();
            if (this.isMultiSelectActive) this.$store.commit(enums.DEACTIVE_MULTI_SELECT);
            this.currentTapeMode = !this.currentTapeMode;
        },
        handleDrawPaths() {
            if (this.currentTapeMode) this.currentTapeMode = false;
            if (this.isDrawContoursActive) this.handleDrawContours();
            if (this.isDrawRangesActive) this.handleDrawRanges();
            if (this.isMultiSelectActive) this.$store.commit(enums.DEACTIVE_MULTI_SELECT);

            if (!this.isDrawPathsActive) {
                this.$store.commit(enums.ACTIVE_DRAW_PATHS);
                this.$store.commit(enums.DESELECT_PATHS_ALL);
            } else this.$store.commit(enums.DEACTIVE_DRAW_PATHS);
            if (this.currentDragMode) this.currentDragMode = false;
        },
        handleDrawContours() {
            if (this.currentTapeMode) this.currentTapeMode = false;
            if (this.isDrawPathsActive) this.handleDrawPaths();
            if (this.isDrawRangesActive) this.handleDrawRanges();
            if (this.isMultiSelectActive) this.$store.commit(enums.DEACTIVE_MULTI_SELECT);

            if (!this.isDrawContoursActive) this.$store.commit(enums.ACTIVE_DRAW_CONTOURS);
            else this.$store.commit(enums.DEACTIVE_DRAW_CONTOURS);
            if (this.currentDragMode) this.currentDragMode = false;
        },
        handleDrawRanges() {
            if (this.currentTapeMode) this.currentTapeMode = false;
            if (this.isDrawContoursActive) this.handleDrawContours();
            if (this.isDrawPathsActive) this.handleDrawPaths();
            if (this.isMultiSelectActive) this.$store.commit(enums.DEACTIVE_MULTI_SELECT);

            if (!this.isDrawRangesActive) this.$store.commit(enums.ACTIVE_DRAW_RANGES);
            else this.$store.commit(enums.DEACTIVE_DRAW_RANGES);
            if (this.currentDragMode) this.currentDragMode = false;
        },
        handleUndo() {
            if (this.isDrawContoursActive) bus.emit('p-painter-contours.undo');
            else if (this.isDrawRangesActive) bus.emit('p-painter-contours.undo');
            else if (this.currentTapeMode) bus.emit('p-painter-contours.undo');
            else if (this.isDrawPathsActive) bus.emit('p-painter-paths.undo');
        },
        handleTrack() {
            if (this.currentTapeMode) this.currentTapeMode = false;
            if (!this.isTrackActive) this.$store.commit(enums.ACTIVE_TRACK);
            else this.$store.commit(enums.DEACTIVE_TRACK);
        },
        handleAltFn() {
            if (!this.isAltFnActive) this.$store.commit(enums.ACTIVE_ALTFN);
            else this.$store.commit(enums.DEACTIVE_ALTFN);
        },

        toOpenOrCloseFn(flag) {
            this.showIcon = flag == 1
            let box = document.getElementById("index_tip_");
            this.boxTop = box.offsetTop + "px";
            this.box2Top = box.offsetTop + "px";
        },
        getmoveFn() {
            let divX = 0;
            let divY = 0;
            let mouseX = 0;
            let mouseY = 0;
            let box = document.getElementById("index_tip_");
            //为box绑定一个鼠标按下事件
            if (box) {
                box.onmousedown = function (e) {
                    console.log(e);
                    //获取盒子距离浏览器可视窗口的水平距离和垂直距离
                    divX = this.offsetLeft;
                    divY = this.offsetTop;
                    //获取鼠标距离浏览器可视窗口的水平位置和垂直位置
                    mouseX = e.clientX;
                    mouseY = e.clientY;
                    //为全局绑定一个鼠标移动事件（1.为什么不给box绑定？）
                    document.onmousemove = function (e) {

                        //获取移动后的水平偏移量和垂直偏移量
                        let disX = e.clientX - mouseX;
                        let disY = e.clientY - mouseY;
                        //令箱子移动：移动前的位置+移动后的位置
                        box.style.left = disX + divX + "px";
                        box.style.top = disY + divY + "px";
                    }
                    //为盒子绑定一个鼠标移出事件,使箱子停止移动
                    document.onmouseup = function () {
                        document.onmousemove = null;
                        document.onmouseup = null;
                    }
                }
            }
        }
    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<!-- <style scoped lang="scss"> -->
<style lang="scss">
#index_tip:hover {
    .open-icon {
        .iconfont {
            font-size: 33px !important;
        }

        img {
            width: 81%;
        }
    }
}

#index_tip_ {
    position: absolute;
    left: 16px;
    width: 80px;
    z-index: 1;
    box-shadow: 10px 0px 7px #d3daeb;
    background-color: #ffffff;
    cursor: move;
    border-radius: 35px;

    #index_tip_in {
        img {
            margin: 10px 0;
            width: 80%;
            cursor: pointer;
        }

        img:hover {
            width: 83%;
            height: 32%;
            background-color: #eef4ff !important;
        }
    }

    .open-icon {
        text-align: center;

        .title {
            color: #000;
            margin-bottom: 8px;
            margin-top: -2px;

        }

        .iconfont {
            font-size: 25px !important;
            color: #bacdff;
        }

        img {
            width: 80%;
        }

        img:hover {
            width: 81%;
            cursor: pointer;

        }
    }

    .handler {
        color: orangered;
        cursor: pointer;
    }
    .handler:hover {
        color: blue;
    }

    .stay {
        font-size: 8px;
        margin-top: 10px;
        margin-left: 13px;
        margin-bottom: 10px;
        color: rgb(64, 158, 255);
    }

    .center {
        margin-left: 20px;
        margin-bottom: 2px;
        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    }

    .left {
        display: flex;
        align-items: center;
        /*flex: 1 1 auto;*/
        flex: 0 0 auto;
        flex-wrap: wrap;
    }

    .right {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        min-width: 150px;
        /*width: 150px;*/
        height: 22px;
        margin: 0 2px 0 0;
        padding: 2px 6px;
        /*border: #f2f2f4 1px solid;*/
        border: #b6b9c2 1px solid;
        border-radius: 3px;
        flex: 0 0 auto;
        /*color: #f2f2f4;*/
        color: #454a60;
        font-size: 10px;
    }

    .div-i {
        position: relative;

        .icon_top {
            position: absolute;
            top: 0;
            z-index: 2;
        }
    }

    .icon {
        /*display: block;*/
        font-size: 20px;
        /*font-weight: 300;*/
        text-align: center;
        width: 26px;
        height: 26px;
        line-height: 26px;
        border: 1px solid transparent;
        border-radius: 3px;
        margin: 5px;
        padding: 0;
        /*background-size: cover;*/
        background: transparent;
        /*color: #f2f2f4;*/
        color: #b8b8c0;
        cursor: pointer;

        &.selected {
            /*background: rgb(42, 42, 42);*/
            color: #2763ff;
            font-weight: 700;
            text-shadow: 0 0 0 #ffffff;
        }

        &.icon-ruler {
            background: #f2f2f2;
            height: 36px;
            width: 36px;
            line-height: 36px;
            margin: 0px;
        }

        &.hide {
            position: relative;

            &::after {
                position: absolute;
                content: '';
                top: 12px;
                left: 2px;
                width: 20px;
                height: 1px;
                background: #b8b8c0;
                /*background: white;*/
                transform: rotate(45deg);
            }
        }

        &.selected {
            &.hide {
                &::after {
                    background: #2763ff;
                }
            }
        }
    }
}
</style>
